<template>
  <div>
    <h1>App</h1>
    <div :style="{ display: 'flex', justifyContent: 'space-around' }">
      <Content
        :type="'person'"
        v-for="person in persons"
        :key="person.id"
        v-bind="person"
      >
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </Content>
    </div>
    <hr />
    <div :style="{ display: 'flex', justifyContent: 'space-around' }">
      <Content
        :type="'animal'"
        v-for="animal in animals"
        :key="animal.id"
        v-bind="animal"
      >
        <ol>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ol>
      </Content>
    </div>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {
      persons: [
        {
          id: 1,
          name: "xiaowang",
          age: 18,
          girlFri: ["lily", "lucy", "lihua", "cuihua"],
        },
        {
          id: 2,
          name: "xiaowang1",
          age: 19,
          girlFri: ["lily1", "lucy1", "lihua1", "cuihua1"],
        },
        {
          id: 3,
          name: "xiaowang2",
          age: 28,
          girlFri: ["lily2", "lucy2", "lihua2", "cuihua2"],
        },
        {
          id: 4,
          name: "xiaowang3",
          age: 38,
          girlFri: ["lily3", "lucy3", "lihua3", "cuihua3"],
        },
      ],

      animals: [
        {
          id: 1,
          name: "mao",
          age: 18,
          girlFri: ["xiaohei", "xiaohong", "xiaohua", "xiaolan"],
        },
        {
          id: 2,
          name: "gou",
          age: 19,
          girlFri: ["xiaohei", "xiaohong", "xiaohua", "xiaolan"],
        },
        {
          id: 3,
          name: "ji",
          age: 28,
          girlFri: ["xiaohei", "xiaohong", "xiaohua", "xiaolan"],
        },
        {
          id: 4,
          name: "ya",
          age: 38,
          girlFri: ["xiaohei", "xiaohong", "xiaohua", "xiaolan"],
        },
      ],
    };
  },
};
</script>

<style></style>
